<template>
    <div class="row">
        <div class="col-2">
            <a class="link-primary">
                新增
            </a>
            <div class="list-group">
                <a href="#"
                    class="list-group-item list-group-item-action justify-content-between align-items-center d-flex active">第一项<span
                        class="badge bg-light rounded-pill text-dark">14</span></a>
                <a href="#"
                    class="list-group-item list-group-item-action justify-content-between align-items-center d-flex">第二项<span
                        class="badge bg-primary rounded-pill">14</span></a>
                <a href="#"
                    class="list-group-item list-group-item-action justify-content-between align-items-center d-flex">第三项<span
                        class="badge bg-primary rounded-pill">14</span></a>
            </div>
        </div>
        <div class="col-10">
            <div class="row">
                <div class="col">
                    <input type="text" class="form-control" placeholder="标题" aria-label="First name">
                </div>
                <div class="col">
                    <button type="submit" class="btn btn-primary">搜索</button>
                </div>
            </div>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">标题</th>
                        <th scope="col">内容</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(blog, index) in blogList" :key="index">
                        <th scope="row">{{ index + 1 }}</th>
                        <td>{{ blog.name }}</td>
                        <td>{{ blog.content }}</td>
                        <td><button type="button" class="btn btn-primary btn-sm">操作</button></td>
                    </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
                    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                </ul>
            </nav>
        </div>
        <context-menu :menu="menulist">
            <h3>菜单</h3>
        </context-menu>
    </div>

</template>

<script>

import ContextMenu from '@/components/ContextMenu.vue';

export default {
    components: {
        ContextMenu
    },
    data() {
        return {
            menulist: [{ label: "abc" }],
            blogList: [
                { name: "我的blog", content: "我的blog你可以为菜单项添加一个自定义的类，并在CSS中为这个类设置border-radius属性。" },
                { name: "我的blog", content: "我的blog你可以为菜单项添加一个自定义的类，并在CSS中为这个类设置border-radius属性。" },
                { name: "我的blog", content: "我的blog你可以为菜单项添加一个自定义的类，并在CSS中为这个类设置border-radius属性。" },
                { name: "我的blog", content: "我的blog你可以为菜单项添加一个自定义的类，并在CSS中为这个类设置border-radius属性。" },
                { name: "我的blog", content: "我的blog你可以为菜单项添加一个自定义的类，并在CSS中为这个类设置border-radius属性。" },
                { name: "我的blog", content: "我的blog你可以为菜单项添加一个自定义的类，并在CSS中为这个类设置border-radius属性。" }
            ]
        }
    }
}
</script>